<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    vuejs 是一个前端框架，可以进行无dom的方式实现数据驱动。数据变了页面显示最新的数据。同时也可以不dom操作的情况下，收集我们的数据。

</p>
<p>
    1. vuejs 双向数据绑定：有两个方向的数据的变化；方向一的变化指的是 数据到视图的变化；方向二的变化指的是 视图到数据。

</p>
<p>
    2. vuejs 提供的强大的指令系统
</p>
<div id="app">
    <!--区域交个 vuejs-->
    <h2>{{ title }}</h2>

    <div>{{ richContent }}</div>
    <!--v-html是vuejs提供的一个指令，可以帮我们正常的显示包含html代码的数据字符串-->
    <!--底层 dom.innerHTML = richContent -->
    <div v-html="richContent"></div>
    <!--v-text 和 插值表达式类似-->
    <div v-text="title"></div>
    <!--很多其他的指令 https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4 -->

    <hr>
    <form action="">
        <div>
            <!--v-model 就是 vuejs 提供的指令，可以帮我们扩充html的能力，v-model 可以用于收集表单空间的值-->
            用户名：<input type="text" v-model="username">
        </div>
    </form>
    <hr>
    <div>
        用户输入的信息为是：{{ username }}
    </div>
</div>
</body>
<!--1. 引入 vuejs库-->
<script src="./lib/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            title: 'hi vuejs!',
            username: '',
            richContent: '<h3>我是一个标题</h3><p>Lorem ipsum dolor sit amet.</p>', // 包含HTML标签的字符串

        }
    });

</script>

</html>
